<script lang="ts">
import {defineComponent, ref, onActivated, Ref, UnwrapRef, defineAsyncComponent, h} from "vue"
import {getCrontabListApi, runCrontabApi} from "@/apps/admin/api/system/crontab";
import {useSuccessDialog} from "@/hooks/DialogMsg";
import {usePopupComponent, usePreviewImages} from "@/components/FunctionComponents";

export default defineComponent({
  setup() {
    const list: Ref<UnwrapRef<any[]>> = ref([])

    const loading: Ref<UnwrapRef<boolean>> = ref(false)

    /**
     * 获取任务列表
     */
    function getCrontabList() {
      loading.value = true
      getCrontabListApi().then(result => {
        if (result.code === 200) {
          list.value = result.data
        }
        loading.value = false
      })
    }

    /**
     * 手动执行一次任务
     * @param crontab
     */
    function runCrontab(crontab: any) {
      runCrontabApi(crontab.name).then(result => {
        if (result.code === 200) {
          useSuccessDialog(result.msg)
        }
      })
    }

    /**
     * 打开日志面板
     */
    function openLogger(log: any) {
      const component = h(defineAsyncComponent((): any => import("./components/LogList.vue")), {
        sign: log.name
      })
      usePopupComponent('日志面板', component, '500px')
    }


    /**
     * 日志详情
     * @param log
     */
    function openInfo(log:any) {
      const component = h(defineAsyncComponent((): any => import("./components/LogInfo.vue")), {
        info: log
      })
      usePopupComponent('日志详情', component, '700px')
    }


    onActivated(() => {
      getCrontabList()
    })
    return {
      list, loading, runCrontab, openLogger, openInfo
    }
  }
})
</script>

<template>
  <el-scrollbar height="calc( 100vh - 115px)">
    <div style="padding:0 5px">
      <el-row :gutter="20">
        <el-col :xl="6" :lg="6" :md="12" :sm="24" :xs="24" v-for="item in list" :key="item.id">
          <el-card class="task task-item app-margin-bottom-small" shadow="hover">
            <ul>
              <li>
                <h3>任务描述
                  <el-tag v-if="item.enable" effect="dark">运行中</el-tag>
                  <el-tag v-else type="danger" effect="dark">未开启</el-tag>
                </h3>
                <p class="task-memo">{{ item.memo }}</p>
              </li>
              <li>
                <h3>上次运行</h3>
                <p>
                  <template v-if="item.last_execution>0">
                    <show-time :time="item.last_execution"></show-time>
                  </template>
                  <template v-else>
                    <el-text type="danger">待运行</el-text>
                  </template>
                </p>
              </li>
            </ul>
            <div class="bottom">
              <div class="state">
                <el-space>
                  <el-tooltip v-if="item.enable" content="点击运行任务" placement="top">
                    <app-icon class="app-tap" @click="runCrontab(item)" color="#67c23a" size="24" name="VideoPlay"></app-icon>
                  </el-tooltip>
                  <el-tooltip v-else content="当前任务已禁止" placement="top">
                    <app-icon class="app-tap" color="#ff0000" size="24" name="VideoPause"></app-icon>
                  </el-tooltip>
                </el-space>
              </div>
              <div class="handler">
                <el-space spacer="|">
                  <el-link type="info" @click="openLogger(item)">日志</el-link>
                  <el-link type="primary" @click="openInfo(item)">详情</el-link>
                </el-space>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </el-scrollbar>

</template>
<style lang="scss" scoped>
.task-item {
  ul {
    padding-left: 0;
    padding-top: 0;
    margin-top: 0;

    li {
      list-style-type: none;
      margin-bottom: 10px;

      h3 {
        font-size: 14px;
        font-weight: normal;
        color: #409EFF;
        margin-top: 0;
        padding-top: 0;

        .el-tag {
          float: right;
          margin-top: -5px;
        }
      }

      p {
        margin-top: 5px;
        color: #999;

        &.task-memo {
          height: 60px;
          line-height: 30px;
          overflow: hidden;
          text-overflow: ellipsis; //省略号
          display: -webkit-box; //-webkit-box是兼容IOS和老版本Android浏览器的方式
          -webkit-line-clamp: 2; //限制行数
          -webkit-box-orient: vertical; //垂直方向排列
        }
      }
    }
  }

  .bottom {
    border-top: 1px solid #ebeef5;
    text-align: right;
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.task-add {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  color: #999;

  &:hover {
    color: #409eff;
  }

  i {
    font-size: 30px;
  }

  p {
    font-size: 12px;
    margin-top: 20px;
  }
}

.dark {
  .task-item {
    .bottom {
      border-color: var(--el-border-color-light);
    }
  }
}
</style>
